{layout 'layout.latte'}


{block content}
<div class="bg-gray-100 ">
    <div class="mx-auto max-w-7xl  bg-no-repeat bg-opacity-70 bg-auto"
         style="background-image: url('/theme/images/banner.jpg')">
        <div class="bg-gray-100 bg-opacity-80">
            <div
                    class="flex flex-col justify-center items-center text-center bg-gradient-to-r from-gray-100 via-transparent to-gray-100"
                    style="height: 500px; ">

                <div class=" text-gray-900 text-3xl lg:text-5xl font-bold">
                    {_'welcome'} <span class="text-blue-600">DuxCMS</span> Next
                </div>
                <div class=" text-gray-900 text-lg mt-5">
                    {_'info'}
                </div>
                <div class="mt-12 flex gap-4 justify-center items-center">
                    <a href="https://www.dux.cn" class="bg-blue-600 py-2 px-5 text-white rounded-3xl cursor-pointer hover:bg-blue-700">{_'site'}</a>
                    <a href="https://www.dux.cn/page/docs" class="bg-white py-2 px-5 text-blue-600 rounded-3xl cursor-pointer hover:bg-blue-700 hover:text-white">{_'docs'}</a>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="mx-auto max-w-7xl mt-10 px-4">


    <div class="flex py-6">
        <div class="flex-grow font-black text-lg">{_'recommend'}</div>
        <div class="flex-none"></div>
    </div>
    <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
        {var $list = \App\Content\Service\Article::lists(recId: 1, limit: 4)}
        {foreach $list as $item}
            {include 'widgets/article-rec.latte', item: $item}
        {/foreach}
    </div>


    {var $classList = \App\Content\Service\Category::query()->with(['descendants'])->whereNull('parent_id')->orderBy('id')->get()}
    {foreach $classList as $class}
    <div class="mt-8">
        <div class="flex py-6">
            <div class="flex-grow font-black text-lg">
                <a href="/page/article/{$class->id}"
                   class="hover:underline">{$class->name}</a>
                <span
                        class="ml-2 font-normal text-gray-300">{$class->subname}</span>
            </div>
            <div class="flex-none">
                <a href="/page/article/{$class->id}" class="hover:underline">{_'more'} →</a>
            </div>
        </div>

        <div class="grid lg:grid-cols-2 gap-6">
            {var $categories = [$class->id, ...$class->descendants()->pluck('id')]}
            {var $list = \App\Content\Service\Article::query()->whereIn('class_id', $categories)->limit(4)->orderByDesc('id')->get()}
            {foreach $list as $item}
                {include 'widgets/article-show.latte', item: $item}
            {/foreach}
        </div>
    </div>
    {/foreach}

</div>
{/block}